<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="clock" style="width:300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
font-size: 50px;">

    --:--:--

</div>
<div>
    <input type="number" id="input"/>
    <button onclick="timing()">开始计时</button>
    <audio src="./img/audio/v9.ogg" id="audio"></audio>
</div>

<iframe border=0 frameBorder=0 height=230 scrolling=no
        src="http://www.1t2t.com/1t/so2.htm"
        width=230></iframe>

<script>
    function audio(){
    var audioElement=document.getElementById('audio');
    audioElement.play();
    }



    function timing(){

        //第一步：获取所输入的数值
        var input=document.getElementById("input")

        //通过.value来获取输入框的值
        var time=input.value

       // alert(time)

        //第二步：根据数值延迟执行某个函数
        setTimeout(Do,time)

        //第三步：编写时间到了之后要执行的函数
        function Do(){
            audio();
            //通过alert弹出提示
            alert("时间到！")
        }
    }

    function kata(){



        //获取现在的时间
        var date=new Date()
        var h=date.getHours()
        var m=date.getMinutes()
        var s=date.getSeconds()

        //把时间加起来准备放到页面上面
        var time=h+":"+m+":"+s

        //获取元素
        var clock=document.getElementById("clock")

        //放置文字
        clock.innerText=time
    }

    kata()
    setInterval(kata,1000)


</script>
</body>
</html>